<template>
  <div class="profile-container" >
      <div class="profile-header">
        <div class="cover">
          <div class="avatar-wrapper">
            <el-avatar :size="120" :src="userInfo.imgUrl">
            </el-avatar>
            <div class="level-badge">Lv.5</div>
          </div>
        </div>
        <h1 class="username">{{ userInfo.username }}</h1>
        <p class="signature">{{ userInfo.signature || '这个玩家很神秘，什么都没留下~' }}</p>
      </div>
      <div class="stats-grid">
        <div class="stat-item">
          <img class="stat-icon" src="../../assets/fans.png" alt=""/>
          <div class="stat-value">{{ userInfo.fansNum }}</div>
          <div class="stat-label">粉丝</div>
        </div>
        <div class="stat-item">
          <img class="stat-icon" src="../../assets/following.png" alt=""/>
          <div class="stat-value">{{ userInfo.followingNum }}</div>
          <div class="stat-label">关注</div>
        </div>
      </div>
      <el-card class="info-card"  @click="showEditDialog">
        <el-tabs v-model="activeTab">
          <el-tab-pane  label="我的信息">
            <div class="info-grid">
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px"><Iphone /></el-icon>手机号</label>
                <div>{{ userInfo.phone || '未设置'}}</div>
              </div>
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px"><Message /></el-icon> 邮箱</label>
                <div>{{ userInfo.email || '未设置' }}</div>
              </div>
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px;"><Male />/<Female/></el-icon> 性别</label>
                <div>{{ genderMap[userInfo.gender]}}</div>
              </div>
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px"><User /></el-icon> 年龄</label>
                <div>{{  userInfo.age || '未设置'}}</div>
              </div>
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px"><Sort /></el-icon> 身高</label>
                <div>{{  userInfo.height  || '未设置'}}</div>
              </div>
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px"><Box /></el-icon> 体重</label>
                <div>{{  userInfo.weight || '未设置'}}</div>
              </div>
              <div class="info-item">
                <label><el-icon style="position: relative;top:5px"><Calendar /></el-icon> 生日</label>
                <div>{{  userInfo.birthday || '未设置'}}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    <el-card class="info-card" @click="showAccountDialog">
      <el-tabs v-model="activeTab">
        <el-tab-pane  label="账户信息">
          <div class="info-grid">
            <div class="info-item">
              <label><el-icon style="position: relative;top:5px"><Money /></el-icon>余额</label>
              <div>{{ userAccount.accountBalance || 0}}</div>
            </div>
            <div class="info-item">
              <label><el-icon style="position: relative;top:5px"><Star /></el-icon> 积分</label>
              <div>{{ userAccount.points || 0 }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 用户信息编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" class="large-font-dialog"
               title="修改个人信息" style="width: 60%;height: 100%;">
      <el-form :model="editForm" label-width="100px" :rules="editRules">
        <el-form-item label="头像">
          <el-upload
              v-model:file-list="fileList"
              v-model:action="actionUrl"
              name="file"
              limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="editForm.gender">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
              v-model="editForm.birthday"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="身高(cm)" prop="height">
          <el-input-number v-model="editForm.height" :min="0" :precision="1" />
        </el-form-item>
        <el-form-item label="体重(kg)" prop="weight">
          <el-input-number v-model="editForm.weight" :min="0" :precision="1" />
        </el-form-item>
        <el-form-item label="个性签名" prop="signature">
          <el-input v-model="editForm.signature" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>

    <!-- 账户记录弹窗 -->
    <el-dialog v-model="accountDialogVisible" class="large-font-dialog"
               title="账户记录" style="width: 60%;height: 75%;">
      <el-table class="large-font-table" :data="accountLogs" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="260" />
        <el-table-column prop="tDate" label="日期" width="120">
          <template #default="{ row }">
            {{ dayjs(row.tDate).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="tTime" label="时间" width="100" />
        <el-table-column prop="transcationType" label="类型" width="100">
          <template #default="{ row }">
            {{ transactionTypeMap[row.transcationType] }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">
            ¥{{ row.amount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="counterParty" label="交易方" />
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>
.profile-container {
  background: #f5f7fa;
  min-height: 100vh;
}

.profile-header {
  position: relative;
  text-align: center;
  padding-bottom: 3px;

  .cover {
    height: 130px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 30px 30px;

    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.8);
    }

    .avatar-wrapper {
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);

      .level-badge {
        position: absolute;
        bottom: -10px;
        right: -10px;
        background: #42b983;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        border: 3px solid white;
      }
    }
  }

  .username {
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 2rem;
    color: #2c3e50;
  }

  .signature {
    color: #7f8c8d;
    font-style: italic;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 2rem;

  .stat-item {
    background: white;
    border-radius: 15px;
    padding: 0.5rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);

    .stat-icon {
      width: 21px;
      height: 21px;
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .stat-value {
      font-size: 1.3rem;
      font-weight: bold;
      color: #2c3e50;
    }

    .stat-label {
      color: #95a5a6;
      font-size: 0.7rem;
    }
  }
}

.info-card {
  margin: 2rem;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.2s;
  ::v-deep .el-tabs__nav-wrap::after {
    background: none;
  }
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;

  .info-item {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;

    label {
      width: 210px;
      color: #7f8c8d;
      font-weight: 500;
    }

    div {
      color: #2c3e50;
    }
  }
}

/* 用户信息编辑弹窗 */
:deep(.large-font-dialog) {
  --el-dialog-title-font-size: 21px;

  .el-form-item__label {
    font-size: 15px;
    margin-bottom: 5px;
  }

  .el-input__inner,
  .el-textarea__inner,
  .el-select__selected-item {
    font-size: 13px;
    height: 35px;
    line-height: 35px;
  }

  .el-date-editor {
    width: 100%;
  }
}

/* 账户记录弹窗 */
:deep(.large-font-table) {
  font-size: 16px;

  .el-table__header th {
    font-size: 18px;
    padding: 16px 0;
  }

  .el-table__body td {
    font-size: 16px;
    padding: 14px 0;
  }

  .cell {
    line-height: 1.8;
  }
}

/* 按钮文字大小 */
:deep(.el-dialog__footer) .el-button {
  font-size: 16px;
  padding: 12px 24px;
}
</style>

<script setup>
import { onMounted, ref } from 'vue'
import {ElMessage} from "element-plus";
import axios from "axios";
import { reactive } from 'vue';
import { User,Message,Iphone,Male,Female,Sort,Box,Calendar,Money,Star,Plus} from '@element-plus/icons-vue';

const userAccount =ref({
  "id": '',
  "userId": '',
  "points": '',
  "accountBalance": '',
  "status": ''
})

const getUserAccount = async () => {
  try {
    const res = await axios.get(BASE_URL+'/v1/user-account/select/' + userInfo.value.id);
    if (res.data.code === 2000) {
      userAccount.value = res.data.data
    }
  } catch (error) {
    ElMessage.error('获取账户信息失败')
  }
}

const userInfo = ref({
  phone: '',
  email: '',
  gender: '',
  birthday: '',
  fansNum: 0,
  followingNum: 0,
  username: '加载中...',
  imgUrl: '',
})
const genderMap = { '1': '男', '2': '女' }

const loadUserInfo = async () => {
  try {
    let user = getUser()
    const res = await axios.get(BASE_URL+'/v1/user/select/' + user.id);
    if (res.data.code === 2000) {
      userInfo.value = res.data.data
      await getUserAccount()
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}
onMounted(() => {
  loadUserInfo()
})


import dayjs from 'dayjs'

// 用户信息编辑相关
const editDialogVisible = ref(false)
const editForm = reactive({
  id: '',
  username: '',
  email: '',
  imgUrl: '',
  gender: '',
  birthday: '',
  height: null,
  weight: null,
  signature: ''
})

const editRules = {
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  height: [
    { type: 'number', min: 0, message: '身高不能为负数', trigger: 'blur' }
  ],
  weight: [
    { type: 'number', min: 0, message: '体重不能为负数', trigger: 'blur' }
  ]
}

// 账户记录相关
const accountDialogVisible = ref(false)
const accountLogs = ref([])
const transactionTypeMap = {
  '10': '充值',
  '20': '消费',
  '30': '退款'
}

// 显示用户信息编辑弹窗
const showEditDialog = () => {
  Object.assign(editForm, {
    id: userInfo.value.id,
    username: userInfo.value.username,
    email: userInfo.value.email,
    gender: userInfo.value.gender,
    birthday: userInfo.value.birthday,
    height: userInfo.value.height,
    weight: userInfo.value.weight,
    signature: userInfo.value.signature,
    imgUrl: userInfo.value.imgUrl,
  })
  editDialogVisible.value = true

}

// 提交用户信息修改
const submitEdit = async () => {
  if(fileList.value[0]){
    editForm.imgUrl = fileList.value[0].response.data
  }
  try {
    const res = await axios.post(BASE_URL+'/v1/user/save', editForm)
    if (res.data.code === 2000) {
      ElMessage.success('修改成功')
      // 更新本地数据
      await loadUserInfo()
      editDialogVisible.value = false
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '修改失败')
  }
  fileList.value = []
}

// 显示账户记录弹窗
const showAccountDialog = async () => {
  try {
    const params = {
      userId: userInfo.value.id,
      accountId: userAccount.value.id
    }
    const res = await axios.get(BASE_URL+'/v1/user-account/select-log', { params })
    if (res.data.code === 2000) {
      accountLogs.value = res.data.data
      accountDialogVisible.value = true
    }
  } catch (error) {
    ElMessage.error('获取账户记录失败')
  }
}


const fileList = ref([]);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/delete?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code===2000){
          ElMessage.success('删除成功!');
        }
      })
}

const actionUrl = BASE_URL+'/v1/file/upload';
</script>